<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/plugins/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/plugins/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="/plugins/jquery/1.11.3/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/plugins/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="/plugins/bootstrap3-dialog/1.35.2/js/bootstrap-dialog.min.js"></script>
    <link href="/plugins/bootstrap3-dialog/1.35.2/css/bootstrap-dialog.min.css" rel="stylesheet">
    <style type="text/css">
        body{ font-family: "微软雅黑"; color: #333333; background: #F2F2F2}
        .header-container{
            width: 1200px;
        }
        .header-container-small{
            width: 960px;
        }
        .login-container{
            width: 400px; margin: 70px auto; background: #F2F2F2; padding: 20px; border-radius: 5px;
        }
        .main-container{
            width: 1200px; margin: 70px auto; padding:0; border-radius: 5px;
        }
        .main-container-small{
            width: 960px; margin: 70px auto; background: #F2F2F2; padding: 20px 0; border-radius: 5px;
        }
        .main-container2-small{
            width: 960px; margin: 10px auto; background: #FFFFFF; padding: 20px 20px; border-radius: 5px;
        }
        .main-container-full{
            margin: 70px auto; background: #F2F2F2; padding: 20px 0; border-radius: 5px;
        }

        .no-padding-right{ padding-right: 0}
        .no-padding-left{ padding-left: 0}
        .margin-top-10{margin-top: 10px}
        .margin-bottom-10{margin-bottom: 10px}
        .align-center{text-align: center}
        .text-align-right{text-align: right}
        .clear-fix{ clear: both}
        .navbar-light{ border-bottom: 1px solid #CCCCCC; background: #F2F2F2}
        .nav-right a{ color: #333333 }
        .nav-account{ margin: 10px 0}

        .page-title{margin: 0 0 20px 0; padding: 0 0 10px 0; font-size: 1.5em; color: #555555; border-bottom: 1px solid #CCCCCC}
        .breadcrumb {background: #FFFFFF; margin: 0; padding: 0}
        .navbar-brand { color: #333333}
        .main-body{ min-height: 500px;}
        footer{ text-align: center; clear: both; margin: 10px 0}
        .td-actions{ text-align: right}
        .pagination{ margin: 0 0 10px 0}

        .tab{ background: #FFFFFF; border:1px solid #ddd; border-top:none; padding: 20px}
        .tab-tool{margin: 10px 0 10px}
        .tool-right{ text-align: right}
        .tab-content{margin: 10px 0 10px}
        .tab-form{ margin: 40px 40px;}
        .tab-form-title{margin: 0 0 20px 0; padding: 0 0 10px 0; font-size: 1.2em; color: #555555; border-bottom: 1px solid #CCCCCC}
        .preview{ width: 200px; float: right; text-align: right}
        .screenshot-select{ width: 150px; height: 200px;float: left; margin: 0 10px 10px 0;}
        .screenshot-select .screenshot{height: 150px; border: 1px solid #ddd; text-align: center;overflow: hidden; background: #F2F2F2;
            display: flex; align-items: center;  justify-content: center;}
        .screenshot-select .screenshot img{ }
        .screenshot-select .select{height: 30px; margin: 10px 0}

        .screen-select{ width: 200px; height: 320px;float: left; margin: 0 10px 10px 0}
        .screen-select .screen{height: 280px; border: 1px solid #ddd; overflow: hidden}
        .screen-select .screen img{ width: 200px; height: 280px}
        .screen-select .select{height: 30px; margin: 10px 0}
    </style>
</head>
<body>

<div style="width: 500px; margin: 50px auto">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">管理后台</h3>
        </div>
        <div class="panel-body">
            <form class="form-horizontal" name="loginForm">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label">用户名</label>
                    <div class="col-sm-7">
                        <input type="text" name="username" id="username" class="form-control" placeholder=" ">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-3 control-label">密码</label>
                    <div class="col-sm-7">
                        <input type="password" name="password" id="password" class="form-control" placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-3 control-label">验证码</label>
                    <div class="col-sm-7">
                        <input type="text" name="captcha" id="captcha" class="form-control" placeholder="" style="width:95px;height:40px;">
                        <img src="{{URL::route('get_captcha')}}" title="点击刷新验证码" style="margin-top: -62px;margin-left: 97px" onclick="javascript:this.src='{{URL::route('get_captcha')}}?tm='+Math.random()" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-7">
                        <button type="submit" class="btn btn-primary">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
$(function () {
    $('form[name=loginForm]').submit(function () {

        if($('#username').val()==''){
            BootstrapDialog.show({
                type: BootstrapDialog.TYPE_DANGER,
                title: '<span class="glyphicon glyphicon-alert" style="font-size: 14px;margin-right: 5px"></span> 提示',
                message: '请填写用户名',
                buttons: [{
                    label: '我知道了',
                    cssClass: 'btn-danger',
                    action: function(dialogRef){
                        dialogRef.close();
                    }
                }]
            });
            return false;
        }

        if($('#password').val()==''){
            BootstrapDialog.show({
                type: BootstrapDialog.TYPE_DANGER,
                title: '<span class="glyphicon glyphicon-alert" style="font-size: 14px;margin-right: 5px"></span> 提示',
                message: '请填写密码',
                buttons: [{
                    label: '我知道了',
                    cssClass: 'btn-danger',
                    action: function(dialogRef){
                        dialogRef.close();
                    }
                }]
            });
            return false;
        }

        if($('#captcha').val()==''){
            BootstrapDialog.show({
                type: BootstrapDialog.TYPE_DANGER,
                title: '<span class="glyphicon glyphicon-alert" style="font-size: 14px;margin-right: 5px"></span> 提示',
                message: '请填写验证码',
                buttons: [{
                    label: '我知道了',
                    cssClass: 'btn-danger',
                    action: function(dialogRef){
                        dialogRef.close();
                    }
                }]
            });
            return false;
        }

        var form = $("form");
        $.ajax({
            type: 'POST',
            url: '{{URL::route('manage_login_post')}}',
            headers: { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' },
            data: form.serialize(),
            success: function(res){
                if(res.error == "0") {
                    location.href = '{{URL::route('manage_index')}}';
                }else{
                    BootstrapDialog.show({
                        type: BootstrapDialog.TYPE_DANGER,
                        title: '<span class="glyphicon glyphicon-alert" style="font-size: 14px;margin-right: 5px"></span> 提示',
                        message: res.message,
                        buttons: [{
                            label: '我知道了',
                            cssClass: 'btn-danger',
                            action: function(dialogRef){
                                dialogRef.close();
                            }
                        }]
                    });
                }
            },
        });
        return false;
    });
});
</script>
</body>
</html>